<template>
  <div class="page-container-padding">
    <div>
      <span>日期</span>
      <span>
        <el-date-picker
          v-model="dateRange"
          style="width: 220px; margin-left: 6px"
          type="daterange"
          size="mini"
          :clearable="false"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </span>
      <span style="margin-left: 6px">
        <el-button type="primary" size="mini" @click="querySpecialTask">
          查询
        </el-button>
      </span>
    </div>
    <!-- 显示数据 -->
    <div style="margin-top: 10px">
      <el-table border stripe :data="specialTaskList">
        <el-table-column
          prop="create_date"
          label="日期"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="360px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="swiss_coin"
          label="瑞币"
          width="100px"
          align="right"
        ></el-table-column>
        <el-table-column
          prop="score"
          label="评级得分"
          width="100px"
          align="right"
        ></el-table-column>
        <el-table-column
          prop="examined_zh"
          label="是否有效"
          width="80px"
          align="right"
        ></el-table-column>
        <el-table-column label="附件" width="300px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span
              v-if="scope.row.annex"
              class="annex-file"
              @click="toDownloadAnnex(scope.row)"
            >
              {{ scope.row.annex }}
              <vab-icon :icon="['fas', 'download']"></vab-icon>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="70px" align="center">
          <template slot-scope="scope">
            <i
              class="el-icon-delete-solid"
              style="color: #ff430d; cursor: pointer"
              @click="toDeleteTask(scope.row)"
            >
              删除
            </i>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import { fileStorage } from '@/config'
  import { getMonthDatePoint, datetimeToStr } from '@/utils/datetimeUtils'
  import {
    getMySpecialTask,
    deleteMySpecialTask,
  } from '@/api/departmentWork/specialTask'
  export default {
    data() {
      return {
        dateRange: [],
        currentMonthCount: 0,
        specialTaskList: [],
      }
    },
    mounted() {
      this.setCurrentDates()
      this.querySpecialTask()
    },
    methods: {
      setCurrentDates() {
        let flag = new Date().getDate() < 3 ? 'previous' : 'current'
        this.dateRange = getMonthDatePoint(new Date(), flag)
      },

      querySpecialTask() {
        const params = {
          start: datetimeToStr(this.dateRange[0], true, ''),
          end: datetimeToStr(this.dateRange[1], true, ''),
        }
        getMySpecialTask(params).then((res) => {
          const data = res.data
          this.specialTaskList = data.data
          this.currentMonthCount = data.count
        })
      },
      // 删除一个任务
      toDeleteTask(row) {
        const paramData = {
          start: null,
          end: null,
          tid: row.id,
        }
        this.$baseConfirm('您的删除操作将不可恢复！确定吗？', null, () => {
          deleteMySpecialTask(paramData).then((res) => {
            this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
            if (res.code === 200) {
              this.querySpecialTask()
            }
          })
        })
      },

      // 下载附件
      toDownloadAnnex(row) {
        let a = document.createElement('a')
        a.href = fileStorage + row.annex_url
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      },
    },
  }
</script>

<style scoped lang="scss">
  .annex-file {
    cursor: pointer;
    &:hover {
      color: #0073fc;
    }
  }
</style>
